<template>
    <div class="active-success" :class="{'active-success--mobile':lib.isMobile() === true}">
        <div class="success-container">
            <div class="title">
                <span class="register-pic">
                    <i class="icon icon-check"></i>
                </span>
                <span class="text">{{$t('common.comp.registerSuccess.title')}}</span>
            </div>
            <div class="level">{{$t('common.comp.registerSuccess.level')}}</div>
            <div class="list-title">{{$t('common.comp.registerSuccess.dt')}}</div>
            <ul class="list">
                <li class="item">{{$t('common.comp.registerSuccess.dd1')}}</li>
                <li class="item">{{$t('common.comp.registerSuccess.dd2')}}</li>
                <li class="item">{{$t('common.comp.registerSuccess.dd3')}}</li>
                <div class="withdraw">
                    <div class="text text-black">{{$t('common.comp.registerSuccess.withdraw')}}：</div>
                    <loading type="inline" v-if="isLoading === true"></loading>
                    <div class="text" style="text-align: center;" v-else>{{limit}}</div>
                </div>
            </ul>
            <a href="./login.html" class="ui-btn ui-btn--block">
                {{$t('common.signIn')}}
            </a>

        </div>
    </div>
</template>

<script type="text/babel">
    import Loading from '../../../grsc-base/component/Loading.vue';
    import commonService from '../../common/commonService';
    import filter from '../../../grsc-base/util/filter';
    import parseUrl from '../../../grsc-base/util/parseUrl';
    import lib from '../../common/lib'

    export default {
        components: {
            Loading
        },
        data() {
            return {
                lib:lib,
                isLoading: true,
                limit: '',
                userPreRegistrationId:null,
                randomCode:null
            };
        },
        props:{

        },
        created() {
            this.fetchLimit();
        },
        beforeDestroy(){

        },
        methods: {
            fetchLimit(){
                this.isLoading = true;
                commonService.assetConfigList({
                    key: 'WITHDRAWLEVEL_0'
                }).done((rep)=>{
                    this.isLoading = false;
                    if (rep.code === window.CODE.SUCCESS) {

                        let limitArr = [];
                        let noLimit = '';
                        rep.data.forEach((item,index)=>{
                            if(+item.profileValue>0){
                                limitArr.push(item.profileValue+' '+item.assetCode);
                            }else if(item.profileValue==0){
                                noLimit = '\n'+this.$t('common.noOtherlimit');
                            }
                        });

                        this.limit = limitArr.join(' + ') + noLimit;

                    }else{
                        window.error(rep.msg)
                    }
                })
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    @import "../../scss/base/var";
    .active-success {
        margin: 0 auto;
        box-sizing: border-box;
        width: 520px;
        line-height: 2;
        .success-container {
            padding: 56px 64px;
            //border: 1px #efefef solid;
            border-radius: 4px;
            //background-color: rgba(255,255,255,.6);
            .title {
                margin-bottom: 56px;
                text-align: center;
                font-size: 13px;
                line-height: 1.2;
                .register-pic {
                    box-sizing: border-box;
                    display: inline-block;
                    width: 46px;
                    height: 46px;
                    line-height: 46px;
                    margin-right: 8px;
                    border: 3px #0a94ff solid;
                    //padding-right: 16px;
                    text-align: center;
                    font-size: 18px;
                    border-radius: 50%;
                    padding-top: 3px;
                    vertical-align: middle;
                    .icon {
                        font-size: 34px;
                        color: #0a94ff;
                    }
                }
                .text {
                    display: inline-block;
                    width: 60%;
                    text-align: left;
                    vertical-align: middle;
                    color: #fff;
                }
            }
            .level {
                padding-left: 4px;
                font-size: 13px;;
                font-weight: bold;
                font-family: inherit;
                color: #fff;
            }
            .list-title {
                padding-left: 4px;
                color: $color-font-gray;
            }
            .list {
                padding: 24px 40px;
                //background-color: #fafafa;
                color: $color-font-gray;
                list-style-type: disc;
                .withdraw {
                    min-height: 72px;
                    margin-top: 8px;
                    color: $color-blue;
                    .text-black {
                        //color: #000;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }

        &--mobile{
            width: auto;
            .success-container {
                padding: 56px 0;
            }
        }
    }
</style>